<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父亲调用儿子的方法</title>
</head>
<body>
<div id="app">
  <loading ref="load"></loading>
</div>

<!-- 模板中只能有一个根元素，可以通过元素或者属性定制模板 -->
<!-- slot 中可以放置一些默认的内容，如果传递了内容则替换掉-->
<template id="loading">
  <div v-show="flag">
    疯狂加载中....
  </div>
</template>

</body>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
  let loading = {
    template: `#loading`,
    data(){
      return {flag:true}
    },
    methods: {
      hide(){
        this.flag = false;
      }
    }
  };

  let vm = new Vue({
    el: '#app',
    data: {

    },
    components: {
      loading
    },
    mounted(){
      //ref 如果放在组件上 获取的组件的实例 并不是组件的dom的元素
      // this.$refs.load.hide()
      this.$refs.load.$el.style.background = "red"
    }
  })

  console.log(vm);
</script>
</html>
